<template>
    <div class="container">
        <header>
            <div class="Gwidth">
                <div class="logo">
                    <div class="img">
                        <nuxt-link to="/"><img src="~/static/image/logo.png" alt=""></nuxt-link> 
                    </div>
                    <div class="title">商家版</div>
                </div>
                <ul>
                    <li>
                        <nuxt-link to="/business/login">商家登录</nuxt-link> 
                    </li>
                    <li class="active">
                        <nuxt-link to="/business/login">商家注册</nuxt-link> 
                    </li>
                    <li>
                        <nuxt-link to="/business/download">商家版app</nuxt-link> 
                    </li>
                </ul>
            </div>
        </header>
        <div class="content Gwidth">
            <div class="left">
                <div class="item active">
                    <div class="lf">
                        <span></span>
                    </div>
                    <div class="title">1.企业信息</div>
                </div>
                <div class="item" :class="{active:audit_status}">
                    <div class="lf">
                        <span></span>
                    </div>
                    <div class="title">2.入驻审核</div>
                </div>
            </div>
            <div class="right" v-show="!audit_status">
                <div class="venue">
                    <div class="Ttitle">请选择场馆</div>
                    <div class="type">
                        <div class="type_t">
                            场馆类型：
                        </div>
                        <div class="type_cont">
                            <span class="Noselect" v-for="(item,index) in venue" :key="index" :class="{active:item.type}" @click="TypeClick(item.id,index)">{{item.name}}</span>
                        </div>
                    </div>
                </div>
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline :show-message="true">
                    <div class="company">
                        <div class="Ttitle">
                            公司信息
                        </div>
                        <div class="cont">
                            <div class="lf">
                                <FormItem prop="company_name" label="公司名称：">
                                    <div class="item">
                                        <Input type="text" v-model="formInline.company_name" placeholder="请输入公司名称"></Input>
                                    </div>
                                </FormItem>
                                <FormItem prop="legal_name" label="法人代表：">
                                    <div class="item">
                                        <Input type="text" v-model="formInline.legal_name" placeholder="请输入法人代表"></Input>
                                    </div>
                                </FormItem>
                                <div class="date">
                                    <FormItem prop="start_time" label="营业时间：">
                                        <div class="item">
                                            <TimePicker :value="formInline.start_time" format="HH:mm" placeholder="请选择" @on-change="startTime"></TimePicker>
                                        </div>
                                    </FormItem>
                                    <span>至</span>
                                    <FormItem prop="end_time">
                                        <div class="item">
                                            <TimePicker :value="formInline.end_time" format="HH:mm" placeholder="请选择" @on-change="endTime"></TimePicker>
                                        </div>
                                    </FormItem>
                                </div>
                            </div>
                            <div class="lr">
                                <FormItem prop="province" label="公司地址：">
                                    <div class="address">
                                        <div class="item">
                                            <Select v-model="formInline.province" placeholder="请选择城市" @on-change="provinceChange">
                                                <Option :value="item.city_id" v-for="item in citys" :key="item.area_id">{{item.city_name}}</Option>
                                            </Select>
                                        </div>
                                        <div class="item">
                                            <Select v-model="formInline.city" placeholder="请选择区域" :disabled="!formInline.province">
                                                <Option :value="item.city_id" v-for="item in e_citys" :key="item.city_id">{{item.city_name}}</Option>
                                            </Select>
                                        </div>
                                    </div>
                                </FormItem>
                                <FormItem prop="address" label="详细地址：">
                                    <div class="item">
                                        <Input type="text" v-model="formInline.address" placeholder="请输入详细地址"></Input>
                                    </div>
                                </FormItem>
                            </div>
                        </div>
                    </div>
                    <div class="Gcont">
                        <div class="left">
                            <div class="brand">
                                <div class="Ttitle">
                                    品牌信息
                                </div>
                                <FormItem prop="brand_name" label="品牌名称：">
                                    <div class="item brand_name">
                                        <Input type="text" v-model="formInline.brand_name" placeholder="请输入品牌名称"></Input>
                                    </div>
                                </FormItem>
                                <FormItem prop="logo" label="品牌头像：">
                                    <div class="upload">
                                        <div class="item">
                                            <div class="upload-list" v-for="(item,index) in formInline.logo" :key="index">
                                                <img :src="item">
                                                <div class="upload-list-cover">
                                                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                                    <Icon type="ios-trash-outline" @click.native="handleRemove('logo')"></Icon>
                                                </div>
                                            </div>
                                            <Upload
                                                v-show="formInline.logo.length<1"
                                                ref="upload"
                                                :headers="{webversion:'v1'}"
                                                :show-upload-list="false"
                                                :on-success="logoSuccess"
                                                :format="['jpg','jpeg','png']"
                                                :max-size="2048"
                                                :on-format-error="handleFormatError"
                                                :on-exceeded-size="handleMaxSize"
                                                type="drag"
                                                :action="uploadImg"
                                                :data="imgData"
                                                style="display: inline-block">
                                                <div class="ico">
                                                    <img src="~/static/image/ico/r_upload.png" alt="">
                                                </div>
                                            </Upload>
                                        </div>
                                        <div class="example Noselect" @click="example(3)">查看示例</div>
                                    </div>
                                </FormItem>
                            </div>
                            <div class="material">
                                <div class="Ttitle">
                                    资料提交
                                </div>
                                <div class="tips">
                                    <span>注：请上传【营业执照】的</span>
                                    <span class="red">复印件，并且必须加盖红色企业公章</span>
                                </div>
                                <FormItem prop="business_license" label="营业执照：">
                                    <div class="upload">
                                        <div class="item">
                                            <div class="upload-list" v-for="(item,index) in formInline.business_license" :key="index">
                                                <img :src="item">
                                                <div class="upload-list-cover">
                                                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                                    <Icon type="ios-trash-outline" @click.native="handleRemove('business_license')"></Icon>
                                                </div>
                                            </div>
                                            <Upload
                                                v-show="formInline.business_license.length<1"
                                                ref="upload"
                                                :headers="{webversion:'v1'}"
                                                :show-upload-list="false"
                                                :on-success="handleSuccess"
                                                :format="['jpg','jpeg','png']"
                                                :max-size="2048"
                                                :on-format-error="handleFormatError"
                                                :on-exceeded-size="handleMaxSize"
                                                type="drag"
                                                :action="uploadImg"
                                                :data="imgData"
                                                style="display: inline-block">
                                                <div class="ico">
                                                    <img src="~/static/image/ico/r_upload.png" alt="">
                                                </div>
                                            </Upload>
                                        </div>
                                        <div class="example Noselect" @click="example(1)">查看示例</div>
                                    </div>
                                </FormItem>
                                <div class="tips">
                                    <span>注：开户人</span>
                                    <span class="red">手持身份证</span>
                                    <span>照片</span>
                                </div>
                                <FormItem prop="hand_in_icard" label="手持身份证：">
                                    <div class="upload">
                                        <div class="item">
                                            <div class="upload-list" v-for="(item,index) in formInline.hand_in_icard" :key="index">
                                                <img :src="item">
                                                <div class="upload-list-cover">
                                                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                                    <Icon type="ios-trash-outline" @click.native="handleRemove('hand_in_icard')"></Icon>
                                                </div>
                                            </div>
                                            <Upload
                                                v-show="formInline.hand_in_icard.length<1"
                                                ref="upload"
                                                :headers="{webversion:'v1'}"
                                                :show-upload-list="false"
                                                :on-success="IdCardSuccess"
                                                :format="['jpg','jpeg','png']"
                                                :max-size="2048"
                                                :on-format-error="handleFormatError"
                                                :on-exceeded-size="handleMaxSize"
                                                type="drag"
                                                :action="uploadImg"
                                                :data="imgData"
                                                style="display: inline-block">
                                                <div class="ico">
                                                    <img src="~/static/image/ico/r_upload.png" alt="">
                                                </div>
                                            </Upload>
                                        </div>
                                        <div class="example Noselect" @click="example(2)">查看示例</div>
                                    </div>
                                </FormItem>
                            </div>
                        </div>
                        <div class="right">
                            
                        </div>
                    </div>
                    <div class="contact">
                        <div class="Ttitle">
                            联系人信息
                        </div>
                        <div class="contact_con">
                            <div class="left">
                                <FormItem prop="contacts_phone" label="联系人手机：">
                                    <div class="item">
                                        <Input type="text" suffix=" " v-model="formInline.contacts_phone" placeholder="请输入联系人手机"></Input>
                                    </div>
                                </FormItem>
                                <FormItem prop="contacts_code" label="手机验证码：">
                                    <div class="item code">
                                        <Input type="text" suffix=" " v-model="formInline.contacts_code" placeholder="请输入手机验证码"></Input>
                                        <span class="Noselect" v-show="show" @click="_getCode">获取验证码</span>
                                        <span v-show="!show" class="count">{{count}} s</span>
                                    </div>
                                </FormItem>
                            </div>
                            <div class="right">
                                <FormItem prop="contacts" label="联系人姓名：">
                                    <div class="item">
                                        <Input maxlength="11" type="text" suffix=" " v-model="formInline.contacts" placeholder="请输入联系人姓名"></Input>
                                    </div>
                                </FormItem>
                                <FormItem label="邀请人：">
                                    <div class="item">
                                        <Input maxlength="11" type="text" suffix=" " v-model="formInline.area" placeholder="请输入邀请人手机号"></Input>
                                    </div>
                                </FormItem>
                            </div>
                        </div>
                    </div>
                    <FormItem>
                        <div class="pact">
                            <Checkbox v-model="formInline.pact">阅读并接受</Checkbox>
                            <nuxt-link to="/about/agreement">
                                <span style="color:#666666">一起家具网用户协议</span>
                            </nuxt-link>
                            <span style="color:#666666">与</span>
                            <nuxt-link to="/about/privacypolicy">
                                <span style="color:#666666">隐私政策</span>
                            </nuxt-link>
                        </div>
                        
                    </FormItem>
                    <FormItem>
                        <div class="submit">
                            <Button :loading="loading" type="error" @click="handleSubmit('formInline')">登录</Button>
                        </div>
                    </FormItem>
                </Form>
            </div>
            <div class="review" v-show="audit_status">
                <!-- 2:认证成功/ 1:审核中/ 3:认证失败/ 0:未认证 -->
                <div class="err" v-if="audit_status==3">
                    <div class="ico">
                        <img src="~/static/image/ico/err.png" alt="">
                    </div>
                    <h1>很遗憾，您的资料审核未通过！请重新提交！</h1>
                    <h1>联系我们400-115-1717</h1>
                    <div class="des">驳回说明：营业执照与公司名称不符，法人身份证照片不清楚</div>
                    <Button type="error" @click="again">重新提交</Button>
                </div>
                <div class="pass" v-if="audit_status==2">
                    <div class="ico">
                        <img src="~/static/image/ico/success.png" alt="">
                    </div>
                    <h1>认证成功！</h1>
                    <div class="des">
                        <p>您的资料已提交，平台将尽快完成审核！</p>
                        <p>联系我们400-115-1717</p>
                    </div>
                    <Button type="error" @click="ToPage('/')">返回首页</Button>
                </div>
                <div class="wait" v-if="audit_status==1">
                    <div class="ico">
                        <img src="~/static/image/ico/wait.png" alt="">
                    </div>
                    <h1>您的信息正在审核中，请耐心等待</h1>
                    <div class="des">
                        <p>您的资料已提交，平台将尽快完成审核！</p>
                        <p>联系我们400-115-1717</p>
                    </div>
                    <Button type="error" @click="ToPage('/')">返回首页</Button>
                </div>
            </div>
        </div>
        <Modal v-model="Example" width="500" :styles="{top: '20vh'}">
            <p slot="header"></p>
            <div class="example-cont" v-show="example_avatar">
                <div class="img">
                    <img src="~/static/image/app_logo.png" alt="">
                </div>
                <h1>品牌头像示例</h1>
                <p>支持jpg、png、jpeg格式</p>
                <p>大小不超过100K</p>
                <p>请确保图片完整清晰，否则图片会拉伸变形。</p>
            </div>
            <div class="example-cont" v-show="Id_card">
                <div class="img">
                    <img src="~/static/image/id_card.png" alt="">
                </div>
                <h1>手持身份证示例</h1>
                <p>支持jpg、png、jpeg格式</p>
                <p>大小不超过3M，上传法人手持本人身份证清晰正面照</p>
                <p>图片将用于识别，请确保完整清晰</p>
                <p>请确认证件在有效期内。</p>
            </div>
            <div class="example-cont" v-show="example_license">
                <div class="img">
                    <img src="~/static/image/example_license.png" alt="">
                </div>
                <h1>营业执照示例</h1>
                <p>支持jpg、png、jpeg格式</p>
                <p>大小不超过3M，上传最新版三证合一营业执照清晰正面照</p>
                <p>图片将用于识别，请确保完整清晰</p>
                <p>仅支持大陆工商颁布的营业执照，请确认证件在有效期内。</p>
            </div>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="visible">
            <img :src="bigImg" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import SIdentify  from '~/components/Sidentify'
export default {
    components: {
		SIdentify
	},
    data(){
        const validateUpload = (rule, value, callback) => {
            if (this.formInline.business_license.length>0) {
                callback();                    
            } else {
                callback(new Error('请选择要上传的文件'));
            }
        }
        const validateIdCard = (rule, value, callback) => {
            if (this.formInline.hand_in_icard.length>0) {
                callback();                    
            } else {
                callback(new Error('请选择要上传的文件'));
            }
        }
        const validateLogo = (rule, value, callback) => {
            if (this.formInline.logo.length>0) {
                callback();                    
            } else {
                callback(new Error('请选择要上传的文件'));
            }
        }
        const validateprovince = (rule, value, callback) => {
            if (this.formInline.province) {
                callback();                    
            } else {
                callback(new Error('请选择地区'));
            }
        }
        const validateTel = (rule, value, callback) => {
            if(!(/^1[3456789]\d{9}$/.test(this.formInline.contacts_phone))){ 
                callback(new Error('电话格式不正确'));
            } else{
                callback();   
            }
        }
        return{
            show: true,
            count: '',
            timer: null,
            type:[],
            visible: false,
            Example:false,//是否显示示例
            example_avatar:false,//是否显示头像示例
            Id_card:false,//是否显示身份证示例
            example_license:false,//是否显示营业执照示例
            uploadList: [],//上传图片列表
            loading:false,
            bigImg:'',
            formInline: {
                company_name: '',//公司名称
                legal_name: '',//法人
				brand_name:'',//品牌名
                province:'',//市
                city:'',//区
                address:'',//详细地址
                business_license:[],//营业执照
                hand_in_icard:[],//手持身份证
                logo:[],//品牌头像
                contacts:'',//联系人
                contacts_code:'',//验证码
                contacts_phone:'',//联系人电话
                invite_phone:'',//邀请人
                start_time:'',
                end_time:'',
                pact:false,//协议
            },
            uploadImg:'',//上传图片url
            imgData:{},//上传图片额外参数
            types:[{
                    id:0,
                    title:'办公馆',
                    type:false,
                },{
                    id:1,
                    title:'家居馆',
                    type:false,
                },{
                    id:2,
                    title:'儿童馆',
                    type:false,
                },{
                    id:3,
                    title:'红木馆',
                    type:false,
                },{
                    id:4,
                    title:'木门馆',
                    type:false,
                },{
                    id:5,
                    title:'定制馆',
                    type:false,
                },{
                    id:6,
                    title:'装修馆',
                    type:false,
                },{
                    id:7,
                    title:'设计馆',
                    type:false,
                },
            ],
            citys:[],//城市列表
            e_citys:[],//区列表
            ruleInline: {
                company_name: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' }
                ],
                legal_name: [
                    { required: true, message: '请输入法人代表', trigger: 'blur' }
                ],
				brand_name: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' }
                ],
				province: [
                    { required: true, validator:validateprovince, trigger: 'change' }
                ],
				address: [
                    { required: true, message: '请填写地址', trigger: 'change' }
                ],
                start_time: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                end_time: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                contacts_phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { required: true, validator:validateTel, trigger: 'change' }
                ],
                contacts_code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                contacts: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                business_license: [
                    { required: true,validator: validateUpload, trigger: 'blur' }
                ],
                hand_in_icard: [
                    { required: true,validator:validateIdCard, trigger: 'change' }
                ],
                logo: [
                    { required: true,validator:validateLogo, trigger: 'change' }
                ]
            }
        }
    },
    created(){
        this.getIndexCategory()
        this.getParentAndChildCity()
        if (this.store_id) {
            this.getStoreCertificationData()
        }
        this.uploadImg = this.$API.uploadImg
        this.getSing()
    },
    computed:{
		...mapState(['address','venue','audit_status','store_id','GuserInfo'])
	},
    mounted(){
        this.venue.forEach(item=>{
            item.type = false
        })
    },
    methods:{
        // 认证详情
        async getStoreCertificationData(){
            let{data:{code,data}} = await this.$http.post(this.$API.getStoreCertificationData,{
                store_id    : this.store_id,
                token       : this.GuserInfo.token,
                user_id     : this.GuserInfo.user_id
            })
            if (code==200) {
                this.formInline= {
                    company_name    : data.data.company_name,//公司名称
                    legal_name      : data.data.legal_name,//法人
                    brand_name      : data.data.brand_name,//品牌名
                    province        : data.data.province,//市
                    city            : data.data.city,//区
                    address         : data.data.address,//详细地址
                    business_license: data.data.business_license.split(),//营业执照
                    hand_in_icard   : data.data.hand_in_idcard.split(),//手持身份证
                    logo            : [],//品牌头像
                    contacts        : data.data.contacts,//联系人
                    contacts_code   : '',//验证码
                    contacts_phone  : data.data.contacts_phone,//联系人电话
                    invite_phone    : data.data.invite_phone,//邀请人
                    start_time      : data.data.start_time,
                    end_time        : data.data.end_time,
                    logo            : data.data.logo.split(),
                    pact            : false,//协议
                }
                this.type = data.data.receive_cate.split(',')
                this.venue.forEach(item=>{
                    this.type.forEach(i=>{
                        if (item.id==i) {
                            item.type = true
                        }
                    })
                })
                this.$store.commit('ChangeAuditStatus',data.data.audit_status)
                this.$store.commit('ChangeVenue',this.venue);
            }
            this.provinceChange(data.data.province)
        },
        // 场馆分类
		async getIndexCategory() {
			let {data:{code,data}} = await this.$http.post(this.$API.index.getIndexCategory,{
                token           : this.GuserInfo.token,
                user_id         : this.GuserInfo.user_id
            })
			if(code==200){
				data.data.forEach(item=>{
                    item.type = false
                })
                this.$store.commit('ChangeVenue',data.data);
			}
		},
        // 
        startTime(e){
            console.log('开始时间-----------------',e)
            this.formInline.start_time = e
        },
        endTime(e){
            console.log('结束时间-----------------',e)
            this.formInline.end_time = e
        },
        // 选中城市
        provinceChange(e){
            console.log('城市-----------------',e)
            this.citys.forEach(item=>{
                if (item.city_id == e) {
                    this.e_citys = item.items
                }
            })
        },
        // 查看大图
        handleView (e) {
            console.log('查看大图------------',e)
            this.visible = true;
            this.bigImg = e
        },
        // 移除图片
        handleRemove (e) {
            if(e=='business_license'){
                this.formInline.business_license = ''
            }else if (e=='hand_in_icard') {
                this.formInline.hand_in_icard = ''
            }
        },
        // 上传成功
        handleSuccess (res, file) {
            console.log('上传成功-------------',res,file)
            this.formInline.business_license = res.data.data.file
        },
        IdCardSuccess(res){
            this.formInline.hand_in_icard = res.data.data.file
        },
        logoSuccess(res){
            this.formInline.logo = res.data.data.file
        },
        //上传格式错误
        handleFormatError (file) {
            this.$Notice.warning({
                title: '图片格式不正确',
                desc: '请上传jpg,jpeg,png格式图片'
            });
        },
        // 最大图片限制
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '图片过大',
                desc: '请上传2M内图片'
            });
        },
        //提交
		handleSubmit(name) {
            if (this.type.length<1) {
                this.$Message.error('请先选择场馆类型');
                return
            }
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (!this.formInline.city) {
                        this.$Message.error('请选择区域');
                        return
                    }
                    if (!this.formInline.pact) {
                        this.$Message.error('请先勾选协议');
                        return
                    }
                    if (this.store_id) {
                        this._submit(this.$API.storeAgainCertification)
                    }else{
                        this._submit(this.$API.storeCertification)
                    }
                } else {
                    // this.$Message.error('Fail!');
                }
            })
        },
        async _submit(url){
            this.loading = true
            let{data:{code,data,msg}} = await this.$http.post(url,{
                company_name    : this.formInline.company_name,
                legal_name      : this.formInline.legal_name,
                brand_name      : this.formInline.brand_name,
                user_id         : this.formInline.user_id,
                province        : this.formInline.province,
                city            : this.formInline.city,
                address         : this.formInline.address,
                business_license: this.formInline.business_license.join(),
                hand_in_icard   : this.formInline.hand_in_icard.join(),
                logo            : this.formInline.logo.join(),
                contacts        : this.formInline.contacts,
                contacts_code   : this.formInline.contacts_code,
                contacts_phone  : this.formInline.contacts_phone,
                receive_cate    : this.type.join(),
                business_time   : `${this.formInline.start_time}-${this.formInline.end_time}`,
                invite_phone    : this.formInline.invite_phone,
                platform        : 4,
                store_id        : this.store_id,
                token           : this.GuserInfo.token,
                user_id         : this.GuserInfo.user_id
            })
            this.loading = false
            if (code==200) {
                this.$store.commit('ChangeAuditStatus',data.data.audit_status);
                this.$store.commit('ChangeStoreId',data.data.store_id);

            }else if (code==445) {
                this.$store.commit('ChangeGUserInfo',{user_id:''});
                this.$router.push({path:'/business/login'})
            }else{
                this.$Message.error(msg);
            }
        },
        // 重新提交
        again(){
            this.$store.commit('ChangeAuditStatus','');
        },
        // 选择场馆类型
        TypeClick(id,index){
            this.venue[index].type = !this.venue[index].type
            if(this.type.indexOf(id)==-1){
                this.type.push(id)
            }else{
                this.type.splice(this.type.indexOf(id), 1)
            }
            console.log('场馆类型---------------',this.type)
        },
        // 查看示例
        example(e){
            this.example_license=false
            this.example_avatar=false
            this.Id_card=false
            this.Example=true
            if(e==1){
                this.example_license=true
            }
            if(e==3){
                this.example_avatar=true
            }
            if(e==2){
                this.Id_card=true
            }
        },
        // 获取地区列表
        async getParentAndChildCity(){
            let{data:{code,data}} = await this.$http.post(this.$API.getParentAndChildCity,{
                token           : this.GuserInfo.token,
                user_id         : this.GuserInfo.user_id
            })
            if (code==200) {
                this.citys = data.data
            }
        },
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },1000)
            }
        },
        async _getCode(){
            let{data:{code,data,msg}} = await this.$http.post(this.$API.sendToSms,{
                mobile:this.formInline.contacts_phone,
                platform:4,
                type:9
            })
            if (code==200) {
                this.getCode()
            }else{
                this.$Message.error(msg);
            }
        },
        ToPage(url){
            this.$router.push({path:url})
        },
        getSing(){
            let sha1 = require("sha1")
            let sign = ''
            this.imgData.webversion='v1'//接口版本号
            this.imgData.type = 2
            this.imgData.phone_type=0 //手机系统
            this.imgData.phone_model='an1234sss'//手机型号
            this.imgData.phone_version=10//手机系统版本
            this.imgData.app_version="1.0.0"//APP版本
            this.imgData.phone_deviceid='3524dfd1f214'//手机唯一编码
            this.imgData.platform=2 //商家端app
            let newData = JSON.parse(JSON.stringify(this.imgData));
            newData.key= this.$API.key //口令
            newData.ts=Math.ceil(new Date().getTime()/1000)//当前时间戳
            sign = this.objKeySort(newData)
            this.imgData.ts = newData.ts
            this.imgData.sign = sha1(sign.toLowerCase())
            console.log('当前请求参数---------------------',this.imgData)
		},
		objKeySort(obj) {//排序的函数
		    var newkey = Object.keys(obj).sort();
		    var newObj = '';
		    for (var i = 0; i < newkey.length; i++) {
		        // newObj[newkey[i]] = obj[newkey[i]];
		        newObj =newObj+`&${[newkey[i]]}=${obj[newkey[i]]}`;
		    }
		    return newObj.substring(1);
		}
    },
}
</script>
<style scoped>
    .container header{
        height: 72px;
        background: #1A1A1A;
    }
    .container header>div{
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .container header .logo{
        display: flex;
        align-items: center;
    }
    .container header .logo .title{
        background:url(~/static/image/ico/header_border.png)left center no-repeat;
        line-height: 72px;
        margin-left: 20px;
        padding: 0 20px;
        font-size: 26px;
        font-weight: 500;
        color: #FFFFFF;
    }
    .container header .logo .img,.container header .logo .img img{
        width: 182px;
        height: 33px;
    }
    .container header ul{
        display: flex;
        align-items: center;
    }
    .container header ul li a{
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 72px;
        display: block;
        padding:0 15px;
    }
    .container header ul li.active a{
        background: #F30213;
    }
    .container .content{
        display: flex;

    }
   .container .content>.left {
       padding-right: 50px;
       border-right: 10px solid #F4F6F9;
       min-height: calc(100vh - 72px);
    }
    .container .content>.left .item{
        display: flex;
        align-items: center;
        margin-top: 36px;
    }
    .container .content>.left .item .lf{
        width: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        position: relative;
        margin-right: 30px;
    }
    .container .content>.left .item .lf span{
        width: 7px;
        height: 7px;
        background: #C9C9C9;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }
    .container .content>.left .item.active .lf span{
        width: 20px;
        height: 20px;
        background:url(~/static/image/ico/yes.png)center center no-repeat;
        background-size: 20px;
    }
    .container .content>.left .item.active .title{
        color: #F30213;
    }
    .container .content>.left .item .lf::after{
        content: '';
        width: 1px;
        height: 46px;
        background: #EFEFEF;
        border-radius: 1px;
        position: absolute;
        left:calc(50% - 1px);
        top:20px;
        z-index: -1;
    }
    .container .content>.left .item:last-child .lf::after{
        height: 0;
    }
    .container .content>.left .item .title{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
    }
    .container .content>.right{
        padding: 30px 20px;
        width: calc(100% - 200px);
    }
    .container .content .Ttitle{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
    }
    .container .content .venue .type{
        margin-top: 16px;
        display: flex;
        align-items: center;
    }
    .container .content .venue .type .type_t{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        width: 110px;
    }
    .container .content .venue .type .type_t:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }
    .container .content .venue .type .type_cont{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .container .content .venue .type .type_cont span{
        padding: 4px 10px;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        display: block;
        margin-right: 10px;
    }
    .container .content .venue .type .type_cont .active{
        background: #F30213;
        border-radius: 4px;
        color: #FFFFFF;
    }
    .container .content .company{
        margin-top: 30px;
    }
    .container>>>.ivu-form-item{
        display: flex;
    }
    .container .company>>>.ivu-form-item-content{
        width: 240px;
    }
    /* .container>>>.ivu-input,.container .company>>>.ivu-input-prefix i,.container .company>>>.ivu-select-single .ivu-select-selection,.container .company>>>.ivu-input-suffix i,.container .company>>>.ivu-select-single .ivu-select-selection .ivu-select-placeholder,.container .company>>>.ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 40px;
        line-height: 40px;
    } */

    .container>>>.ivu-form-item-label{
        width: 110px;
    }
    .container .company .cont{
        display: flex;
    }
    .container .company .cont .lf,.container .company .cont .lr{
        width: 350px;
    }
    .container .company .cont .lf{
        margin-right: 70px;
    }
    .container .company .date{
        display: flex;
        align-items: center;
        font-size: 0;
    }
    >>>.ivu-form-inline .ivu-form-item{
        margin-right: 0;
    }
    .container .company .date>>>.ivu-form-item{
        margin-right: 10px;
    }
    .container .company .date>>>.ivu-form-item-content{
        width: 104px;
    }
    .container .company .date span{
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        margin:0 10px 24px 0;
    }
    .container .company .address{
        display: flex;
        align-items: center;
    }
    .container .company .address .item{
        margin-right: 12px;
    }
    .container .company .address .item:last-child{
        margin-right: 0;
    }
    .container .company .address .item>>>.ivu-select{
        width: 113px!important;
    }
    .upload-list{
        display: inline-block;
        width: 158px;
        height: 120px;
        text-align: center;
        line-height: 120px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .upload-list img{
        width: 100%;
        height: 100%;
    }
    .upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .upload-list:hover .upload-list-cover{
        display: block;
    }
    .upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .container>>>.ivu-upload-drag{
        width: 160px;
    }
    .container>>>.ivu-upload-drag .ico{
        width: 100%;
        height: 120px;
        line-height: 120px;
    }
    .container>>>.ivu-upload-drag .ico img{
        vertical-align: middle;
    }
    .container>>>.tips{
        margin-bottom: 20px;
    }
    .container>>>.tips span{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    .container>>>.tips .red{
        color: #F30213;
    }
    .container>>>.example{
        width: 74px;
        height: 25px;
        background: #F30213;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 25px;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 40px;
    }
    .container .upload{
        display: flex;
        align-items: flex-end;
    }
    .Gcont{
        display: flex;
    }
    .container .Gcont .right{
        padding-top: 47px;
        margin-left: 26px;
    }
    .container .Gcont .right>>>.ivu-upload-drag{

        width: 120px;
    }
    .container .Gcont .right>>>.upload-list{

        width: 120px;
    }
    .container .brand_name{
        width: 240px;
    }
    .container .contact .contact_con{
        display: flex;
    }
    .container .contact .contact_con .code{
        display: flex;
    }
    .container .contact .contact_con .code span{
        width: 100px;
        background: #FFFFFF;
        border-left: 1px solid #DEDEDE;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
    }
    .container .contact .contact_con>>>.ivu-form-item-content{
        width: 250px;
        border: 1px solid #DEDEDE;
        border-radius: 4px;
    }
    .container .contact .contact_con>>>.ivu-form-item-content input{
        border: 0;
    }
    .container .contact .contact_con .left{
        margin-right: 74px;
    }
    .container .submit button{
        width: 140px;
        height: 40px;
        background: #F30213;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .container .pact,.container .pact span{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
    }
    .container .pact>>>.ivu-checkbox-checked .ivu-checkbox-inner {
        border-color: #F30213;
        background-color: #F30213;
    }
    .container .review{
        width: calc(100% - 200px);
        padding-top: 70px;
    }
    .container .review>div{
        text-align: center;
    }
    .container .review .ico{
        margin-bottom: 30px;
    }
    .container .review .ico img{
        width: 80px;
        height: 80px;
    }
    .container .review h1{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
    }
    .container .review .des{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 26px;
        margin-top: 40px;
    }
    .container .review button{
        width: 200px;
        height: 40px;
        background: #F30213;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 50px;
    }
    .example-cont{
        text-align: center;
    }
    .example-cont h1{
        font-size: 30px;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
        margin: 20px 0;
    }
    .example-cont p{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        line-height: 30px;
    }
    >>>.ivu-modal-header{
        border-bottom: 0;
        padding:0;
    }
    >>>.ivu-modal-footer{
        border-top: 0;
        padding:0;
    }
</style>
